<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>国际象棋</title>
</head>

<body>
  <div id="box"></div>

  <div style="text-align: center;">Created by Yunzai-Bot & xianyu-plugin</div>

  <style>
    body {
      background-color: bisque;
    }

    #app {
      display: flex;
    }

    #box {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      background-image: url('{{_res}}img/国际象棋背景.svg');
      background-size: cover;
    }

    #box .lattice {
      width: 96px;
      height: 96px;
      margin: 1px;
      background-size: cover;
    }

    .latticebox {
      width: 100%;
      height: 100%;
      background-size: cover;
    }

    .b {
      background-image: url('{{_res}}img/b_box.svg');
    }

    .w {
      background-image: url('{{_res}}img/w_box.svg');
    }
  </style>

  <script>

    let box = document.getElementById("box")
    let data_box = [] // 棋子数据

    const img = {

      width: {
        兵: '',
        王: '',
        后: '',
        象: '',
        车: '',
        马: '',
      },
      black: {
        兵: '',
        王: '',
        后: '',
        象: '',
        车: '',
        马: '',
      },
      空: '',
    }

    let map = '{{map}}' // 地图
    map = map.split(',');
    let archive = '{{archive}}' // 双方棋子标记
    archive = archive.split(',');
    let ss = '{{ss}}' // 移动轨迹地图
    ss = ss.split(',');

    map.forEach((e, index) => {
      if (e !== '空' && archive[index] == '黑') { // 玩家A，黑棋
        if (ss[index] == '黑box') {
          data_box.push(`<div class="lattice" style="background-image: url('${img.black[e]}')"><div class="b latticebox"></div></div>`)
        } else {
          data_box.push(`<div class="lattice" style="background-image: url('${img.black[e]}')"></div>`)
        }
      }
      if (e !== '空' && archive[index] == '白') { // 玩家A，黑棋
        if (ss[index] == '白box') {
          data_box.push(`<div class="lattice" style="background-image: url('${img.width[e]}')"><div class="w latticebox"></div></div>`)
        } else {
          data_box.push(`<div class="lattice" style="background-image: url('${img.width[e]}')"></div>`)
        }
      }
      if (e === '空') {
        if (ss[index] == '黑box') {
          data_box.push(`<div class="lattice"><div class="b latticebox"></div></div>`)
        } else if (ss[index] == '白box') {
          data_box.push(`<div class="lattice"><div class="w latticebox"></div></div>`)
        } else {
          data_box.push(`<div class="lattice"></div>`)
        }
      }
    });

    box.innerHTML = data_box.join('')

  </script>

</body>

</html>